<!--
@description    kpi 看板（新）
@author         秦俊强
@email          458112865@qq.com
@create         2020-05-23 15:30
-->

<template>
  <div>
    <!-- loading -->
    <div v-if="loading" style="width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); position: fixed; top: 0; left: 0; z-index: 1000; text-align: center;">
      <div style="margin: 20% auto;"><a-spin /></div>
    </div>


    <!-- 选项菜单 start -->
    <div class="menu-box">
      <a-row :gutter="10">
        <a-col :md="24" :sm="24">
          <div class="query-date">
            <span>考核日期：</span>
            <a-select :value="yearMonthList.value.text" @change="changeDate">
              <a-select-option v-for="date in yearMonthList.arr"
                               :key="date.value">{{ date.text }}</a-select-option>
            </a-select>
          </div>

          <div class="query-type">
            <span>园区筛选：</span>
            <a-select :value="departInfo.value.text" @change="departChange">
              <a-select-option v-for="item in departInfo.arr"
                               :key="item.value">{{ item.text }}</a-select-option>
            </a-select>
          </div>

          <div class="query-depart">
            <span>查看维度：</span>
            <a-select :value="dimension.value.text" @change="dimensionChange">
              <a-select-option v-for="item in dimension.arr"
                               :key="item.value">{{ item.text }}</a-select-option>
            </a-select>
          </div>
        </a-col>
      </a-row>
    </div>
    <!-- 选项菜单 end -->

    <!-- 看板图表展示 start -->

    <!-- 布局1：选择「全国 + 增长与价值维度」时展示 start -->
    <div class="chart-box" v-if="!departInfo.value.value && dimension.value.value === 'growAndValue'">
      <a-collapse accordion :defaultActiveKey="autoKey" @change="changePanel">
        <!-- income start -->
        <a-collapse-panel key="income" header="收入">
          <div class="panel-box">
            <!-- 概况 start -->
            <a-collapse v-model="activeKey" @change="changePanels">
              <a-collapse-panel key="income-overview" header="收入概况">
                <div class="overview-box">
                  <div style="width: 50%;">
                    <div class="chart-container">
                      <!-- 图表 -->
                      <div style="height: 55%; position: relative; border-bottom: 1px solid #e7e7e7;">
                        <div id="income-bar-main" class="myChart"></div>
                      </div>

                      <!-- 表格 -->
                      <div style="height: 45%; position: relative;">
                        <a-table :loading="loading"
                                 :scroll="tableCommon.scroll"
                                 :columns="tableCommon.columns"
                                 :dataSource="tableInfo.incomeOverview"
                                 :pagination="false"></a-table>
                      </div>
                    </div>
                  </div>

                  <!-- 贡献度 -->
                  <div style="width: 24%;">
                    <div class="chart-container">
                      <div id="income-bar-contribution" class="myChart"></div>
                    </div>
                  </div>

                  <!-- 占比 -->
                  <div style="width: 26%;">
                    <div class="chart-container">
                      <!-- 园区收入占比 -->
                      <div style="height: 50%; position: relative; border-bottom: 1px solid #e7e7e7;">
                        <div id="income-pie-depart" class="myChart"></div>
                      </div>

                      <!-- 业态收入占比 -->
                      <div style="height: 50%; position: relative;">
                        <div id="income-pie-trade" class="myChart"></div>
                      </div>
                    </div>
                  </div>
                </div>
              </a-collapse-panel>
            </a-collapse>
            <!-- 概况 end -->

            <!-- 收入详细 start -->
            <a-collapse v-model="activeKey" class="detail-box" @change="changePanels">
              <a-collapse-panel key="income-detail" header="收入详细">

                <a-collapse v-model="activeKey" class="detail-box">
                  <a-collapse-panel key="income-detail-indep" header="独立收入">
                    <div class="overview-box">
                      <div style="width: 50%;">
                        <div class="chart-container">
                          <!-- 图表 -->
                          <div style="height: 55%; position: relative; border-bottom: 1px solid #e7e7e7;">
                            <div id="income-bar-detail-indep-main" class="myChart"></div>
                          </div>

                          <!-- 表格 -->
                          <div style="height: 45%; position: relative;">
                            <a-table :loading="loading"
                                     :scroll="tableCommon.scroll"
                                     :columns="tableCommon.columns"
                                     :dataSource="tableInfo.incomeDetailIndep"
                                     :pagination="false"></a-table>
                          </div>
                        </div>
                      </div>

                      <!-- 贡献度 -->
                      <div style="width: 24%;">
                        <div class="chart-container">
                          <div id="income-bar-detail-indep-contribution" class="myChart"></div>
                        </div>
                      </div>

                      <!-- 占比 -->
                      <div style="width: 26%;">
                        <div class="chart-container">
                          <!-- 业态收入占比 -->
                          <div style="height: 100%; position: relative;">
                            <div id="income-bar-detail-indep-depart" class="myChart"></div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </a-collapse-panel>

                  <a-collapse-panel key="income-detail-nurse" header="护理收入">
                    <div class="overview-box">
                      <div style="width: 50%;">
                        <div class="chart-container">
                          <!-- 图表 -->
                          <div style="height: 55%; position: relative; border-bottom: 1px solid #e7e7e7;">
                            <div id="income-bar-detail-nurse-main" class="myChart"></div>
                          </div>

                          <!-- 表格 -->
                          <div style="height: 45%; position: relative;">
                            <a-table :loading="loading"
                                     :scroll="tableCommon.scroll"
                                     :columns="tableCommon.columns"
                                     :dataSource="tableInfo.incomeDetailNurse"
                                     :pagination="false"></a-table>
                          </div>
                        </div>
                      </div>

                      <!-- 贡献度 -->
                      <div style="width: 24%;">
                        <div class="chart-container">
                          <div id="income-bar-detail-nurse-contribution" class="myChart"></div>
                        </div>
                      </div>

                      <!-- 占比 -->
                      <div style="width: 26%;">
                        <div class="chart-container">
                          <!-- 业态收入占比 -->
                          <div style="height: 100%; position: relative;">
                            <div id="income-bar-detail-nurse-depart" class="myChart"></div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </a-collapse-panel>

                  <a-collapse-panel key="income-detail-hospital" header="医院收入">
                    <div class="overview-box">
                      <div style="width: 50%;">
                        <div class="chart-container">
                          <!-- 图表 -->
                          <div style="height: 55%; position: relative; border-bottom: 1px solid #e7e7e7;">
                            <div id="income-bar-detail-hospital-main" class="myChart"></div>
                          </div>

                          <!-- 表格 -->
                          <div style="height: 45%; position: relative;">
                            <a-table :loading="loading"
                                     :scroll="tableCommon.scroll"
                                     :columns="tableCommon.columns"
                                     :dataSource="tableInfo.incomeDetailHospital"
                                     :pagination="false"></a-table>
                          </div>
                        </div>
                      </div>

                      <!-- 贡献度 -->
                      <div style="width: 24%;">
                        <div class="chart-container">
                          <div id="income-bar-detail-hospital-contribution" class="myChart"></div>
                        </div>
                      </div>

                      <!-- 占比 -->
                      <div style="width: 26%;">
                        <div class="chart-container">
                          <!-- 业态收入占比 -->
                          <div style="height: 100%; position: relative;">
                            <div id="income-bar-detail-hospital-depart" class="myChart"></div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </a-collapse-panel>
                </a-collapse>

              </a-collapse-panel>
            </a-collapse>
            <!-- 收入分析 end -->
          </div>
        </a-collapse-panel>
        <!-- income end -->

        <!-- EBITDA start -->
        <a-collapse-panel key="EBITDA" header="EBITDA">
          <div class="panel-box">
            <!-- 概况 start -->
            <a-collapse v-model="activeKey" @change="changePanels">
              <a-collapse-panel key="ebitda-overview" header="EBITDA 概况">
                <div class="overview-box">
                  <div style="width: 50%;">
                    <div class="chart-container">
                      <!-- 图表 -->
                      <div style="height: 55%; position: relative; border-bottom: 1px solid #e7e7e7;">
                        <div id="ebitda-bar-main" class="myChart"></div>
                      </div>

                      <!-- 表格 -->
                      <div style="height: 45%; position: relative;">
                        <a-table :loading="loading"
                                 :scroll="tableCommon.scroll"
                                 :columns="tableCommon.columns"
                                 :dataSource="tableInfo.ebitdaOverview"
                                 :pagination="false"></a-table>
                      </div>
                    </div>
                  </div>

                  <!-- 贡献度 -->
                  <div style="width: 24%;">
                    <div class="chart-container">
                      <div id="ebitda-bar-contribution" class="myChart"></div>
                    </div>
                  </div>

                  <!-- 占比 -->
                  <div style="width: 26%;">
                    <div class="chart-container">
                      <!-- 园区收入占比 -->
                      <div style="height: 50%; position: relative; border-bottom: 1px solid #e7e7e7;">
                        <div id="ebitda-pie-depart" class="myChart"></div>
                      </div>

                      <!-- 业态收入占比 -->
                      <div style="height: 50%; position: relative;">
                        <div id="ebitda-pie-trade" class="myChart"></div>
                      </div>
                    </div>
                  </div>
                </div>
              </a-collapse-panel>
            </a-collapse>
            <!-- 概况 end -->

            <!-- 收入详细 start -->
            <a-collapse v-model="activeKey" class="detail-box" @change="changePanels">
              <a-collapse-panel key="ebitda-detail" header="EBITDA 详细">

                <a-collapse v-model="activeKey" class="detail-box">
                  <a-collapse-panel key="ebitda-detail-indep" header="独立 EBITDA">
                    <div class="overview-box">
                      <div style="width: 50%;">
                        <div class="chart-container">
                          <!-- 图表 -->
                          <div style="height: 55%; position: relative; border-bottom: 1px solid #e7e7e7;">
                            <div id="ebitda-bar-detail-indep-main" class="myChart"></div>
                          </div>

                          <!-- 表格 -->
                          <div style="height: 45%; position: relative;">
                            <a-table :loading="loading"
                                     :scroll="tableCommon.scroll"
                                     :columns="tableCommon.columns"
                                     :dataSource="tableInfo.ebitdaDetailIndep"
                                     :pagination="false"></a-table>
                          </div>
                        </div>
                      </div>

                      <!-- 贡献度 -->
                      <div style="width: 24%;">
                        <div class="chart-container">
                          <div id="ebitda-bar-detail-indep-contribution" class="myChart"></div>
                        </div>
                      </div>

                      <!-- 占比 -->
                      <div style="width: 26%;">
                        <div class="chart-container">
                          <!-- 业态收入占比 -->
                          <div style="height: 100%; position: relative;">
                            <div id="ebitda-bar-detail-indep-depart" class="myChart"></div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </a-collapse-panel>

                  <a-collapse-panel key="ebitda-detail-nurse" header="护理 EBITDA">
                    <div class="overview-box">
                      <div style="width: 50%;">
                        <div class="chart-container">
                          <!-- 图表 -->
                          <div style="height: 55%; position: relative; border-bottom: 1px solid #e7e7e7;">
                            <div id="ebitda-bar-detail-nurse-main" class="myChart"></div>
                          </div>

                          <!-- 表格 -->
                          <div style="height: 45%; position: relative;">
                            <a-table :loading="loading"
                                     :scroll="tableCommon.scroll"
                                     :columns="tableCommon.columns"
                                     :dataSource="tableInfo.ebitdaDetailNurse"
                                     :pagination="false"></a-table>
                          </div>
                        </div>
                      </div>

                      <!-- 贡献度 -->
                      <div style="width: 24%;">
                        <div class="chart-container">
                          <div id="ebitda-bar-detail-nurse-contribution" class="myChart"></div>
                        </div>
                      </div>

                      <!-- 占比 -->
                      <div style="width: 26%;">
                        <div class="chart-container">
                          <!-- 业态收入占比 -->
                          <div style="height: 100%; position: relative;">
                            <div id="ebitda-bar-detail-nurse-depart" class="myChart"></div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </a-collapse-panel>

                  <a-collapse-panel key="ebitda-detail-hospital" header="医院 EBITDA">
                    <div class="overview-box">
                      <div style="width: 50%;">
                        <div class="chart-container">
                          <!-- 图表 -->
                          <div style="height: 55%; position: relative; border-bottom: 1px solid #e7e7e7;">
                            <div id="ebitda-bar-detail-hospital-main" class="myChart"></div>
                          </div>

                          <!-- 表格 -->
                          <div style="height: 45%; position: relative;">
                            <a-table :loading="loading"
                                     :scroll="tableCommon.scroll"
                                     :columns="tableCommon.columns"
                                     :dataSource="tableInfo.ebitdaDetailHospital"
                                     :pagination="false"></a-table>
                          </div>
                        </div>
                      </div>

                      <!-- 贡献度 -->
                      <div style="width: 24%;">
                        <div class="chart-container">
                          <div id="ebitda-bar-detail-hospital-contribution" class="myChart"></div>
                        </div>
                      </div>

                      <!-- 占比 -->
                      <div style="width: 26%;">
                        <div class="chart-container">
                          <!-- 业态收入占比 -->
                          <div style="height: 100%; position: relative;">
                            <div id="ebitda-bar-detail-hospital-depart" class="myChart"></div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </a-collapse-panel>
                </a-collapse>

              </a-collapse-panel>
            </a-collapse>
            <!-- 收入分析 end -->
          </div>
        </a-collapse-panel>
        <!-- EBITDA end -->

        <!-- 销售 start -->
        <a-collapse-panel key="sale" header="销售">
          <div class="panel-box">
            <!-- 概况 start -->
            <a-collapse v-model="activeKey" @change="changePanels">
              <a-collapse-panel key="sale-overview" header="概况">
                <div class="overview-box">
                  <div style="width: 50%;">
                    <div class="chart-container">
                      <!-- 图表 -->
                      <div style="height: 70%; position: relative; border-bottom: 1px solid #e7e7e7;">
                        <div id="sale-bar-main" class="myChart"></div>
                      </div>

                      <!-- 表格 -->
                      <div style="height: 30%; position: relative;">
                        <a-table :loading="loading"
                                 :scroll="tableCommon.scroll"
                                 :columns="tableCommon.columns"
                                 :dataSource="tableInfo.saleOverview"
                                 :pagination="false"></a-table>
                      </div>
                    </div>
                  </div>

                  <!-- 贡献度 -->
                  <div style="width: 24%;">
                    <div class="chart-container">
                      <div id="sale-bar-contribution" class="myChart"></div>
                    </div>
                  </div>

                  <!-- 占比 -->
                  <div style="width: 26%;">
                    <div class="chart-container">
                      <!-- 园区收入占比 -->
                      <div style="height: 50%; position: relative; border-bottom: 1px solid #e7e7e7;">
                        <div id="sale-pie-depart" class="myChart"></div>
                      </div>

                      <!-- 业态收入占比 -->
                      <div style="height: 50%; position: relative;">
                        <div id="sale-pie-trade" class="myChart"></div>
                      </div>
                    </div>
                  </div>
                </div>
              </a-collapse-panel>
            </a-collapse>
            <!-- 概况 end -->

            <!-- 收入详细 start -->
            <a-collapse v-model="activeKey" class="detail-box" @change="changePanels">
              <a-collapse-panel key="sale-detail" header="销售详细">

                <a-collapse v-model="activeKey" class="detail-box">
                  <a-collapse-panel key="sale-detail-indep" header="独立销售">
                    <div class="overview-box">
                      <div style="width: 50%;">
                        <div class="chart-container">
                          <!-- 图表 -->
                          <div style="height: 70%; position: relative; border-bottom: 1px solid #e7e7e7;">
                            <div id="sale-bar-detail-indep-main" class="myChart"></div>
                          </div>

                          <!-- 表格 -->
                          <div style="height: 30%; position: relative;">
                            <a-table :loading="loading"
                                     :scroll="tableCommon.scroll"
                                     :columns="tableCommon.columns"
                                     :dataSource="tableInfo.saleDetailIndep"
                                     :pagination="false"></a-table>
                          </div>
                        </div>
                      </div>

                      <!-- 贡献度 -->
                      <div style="width: 24%;">
                        <div class="chart-container">
                          <div id="sale-bar-detail-indep-contribution" class="myChart"></div>
                        </div>
                      </div>

                      <!-- 占比 -->
                      <div style="width: 26%;">
                        <div class="chart-container">
                          <!-- 业态收入占比 -->
                          <div style="height: 100%; position: relative;">
                            <div id="sale-bar-detail-indep-depart" class="myChart"></div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </a-collapse-panel>

                  <a-collapse-panel key="sale-detail-nurse" header="护理销售">
                    <div class="overview-box">
                      <div style="width: 50%;">
                        <div class="chart-container">
                          <!-- 图表 -->
                          <div style="height: 70%; position: relative; border-bottom: 1px solid #e7e7e7;">
                            <div id="sale-bar-detail-nurse-main" class="myChart"></div>
                          </div>

                          <!-- 表格 -->
                          <div style="height: 30%; position: relative;">
                            <a-table :loading="loading"
                                     :scroll="tableCommon.scroll"
                                     :columns="tableCommon.columns"
                                     :dataSource="tableInfo.saleDetailNurse"
                                     :pagination="false"></a-table>
                          </div>
                        </div>
                      </div>

                      <!-- 贡献度 -->
                      <div style="width: 24%;">
                        <div class="chart-container">
                          <div id="sale-bar-detail-nurse-contribution" class="myChart"></div>
                        </div>
                      </div>

                      <!-- 占比 -->
                      <div style="width: 26%;">
                        <div class="chart-container">
                          <!-- 业态收入占比 -->
                          <div style="height: 100%; position: relative;">
                            <div id="sale-bar-detail-nurse-depart" class="myChart"></div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </a-collapse-panel>

                  <a-collapse-panel key="sale-detail-hospital" header="医院销售">
                    <div class="overview-box">
                      <div style="width: 50%;">
                        <div class="chart-container">
                          <!-- 图表 -->
                          <div style="height: 70%; position: relative; border-bottom: 1px solid #e7e7e7;">
                            <div id="sale-bar-detail-hospital-main" class="myChart"></div>
                          </div>

                          <!-- 表格 -->
                          <div style="height: 30%; position: relative;">
                            <a-table :loading="loading"
                                     :scroll="tableCommon.scroll"
                                     :columns="tableCommon.columns"
                                     :dataSource="tableInfo.saleDetailHospital"
                                     :pagination="false"></a-table>
                          </div>
                        </div>
                      </div>

                      <!-- 贡献度 -->
                      <div style="width: 24%;">
                        <div class="chart-container">
                          <div id="sale-bar-detail-hospital-contribution" class="myChart"></div>
                        </div>
                      </div>

                      <!-- 占比 -->
                      <div style="width: 26%;">
                        <div class="chart-container">
                          <!-- 业态收入占比 -->
                          <div style="height: 100%; position: relative;">
                            <div id="sale-bar-detail-hospital-depart" class="myChart"></div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </a-collapse-panel>
                </a-collapse>

              </a-collapse-panel>
            </a-collapse>
            <!-- 收入分析 end -->
          </div>
        </a-collapse-panel>
        <!-- 销售 end -->
      </a-collapse>
    </div>
    <!-- 布局1：选择「全国 + 增长与价值维度」时展示 end -->

    <!-- 布局2：选择「单个园区 + 增长与价值维度」时展示 start -->
    <div class="chart-box" v-else-if="departInfo.value.value && dimension.value.value === 'growAndValue'">
      <a-collapse accordion :defaultActiveKey="autoKey" @change="changePanel">
        <!-- income start -->
        <a-collapse-panel key="income" header="收入">
          <div class="panel-box">
            <!-- 概况 start -->
            <a-collapse v-model="activeKey" @change="changePanels">
              <a-collapse-panel key="income-overview" header="收入概况">
                <div class="overview-box">
                  <div style="width: 65%;">
                    <div class="chart-container">
                      <!-- 图表 -->
                      <div style="height: 55%; position: relative; border-bottom: 1px solid #e7e7e7;">
                        <div id="income-bar-main" class="myChart"></div>
                      </div>

                      <!-- 表格 -->
                      <div style="height: 45%; position: relative;">
                        <a-table :loading="loading"
                                 :scroll="tableCommon.scroll"
                                 :columns="tableCommon.columns"
                                 :dataSource="tableInfo.incomeOverview"
                                 :pagination="false"></a-table>
                      </div>
                    </div>
                  </div>

                  <!-- 占比 -->
                  <div style="width: 35%;">
                    <div class="chart-container">
                      <!-- 业态收入占比 -->
                      <div style="height: 100%; position: relative;">
                        <div id="income-pie-trade" class="myChart"></div>
                      </div>
                    </div>
                  </div>
                </div>
              </a-collapse-panel>
            </a-collapse>
            <!-- 概况 end -->

            <!-- 收入详细 start -->
            <a-collapse v-model="activeKey" class="detail-box" @change="changePanels">
              <a-collapse-panel key="income-detail" header="收入详细">
                <div class="overview-box">

                  <!-- 独立收入 start -->
                  <div style="width: 33.333%;">
                    <div class="chart-container">
                      <!-- 图表 -->
                      <div style="height: 55%; position: relative; border-bottom: 1px solid #e7e7e7;">
                        <div id="income-bar-detail-indep-main" class="myChart"></div>
                      </div>

                      <!-- 表格 -->
                      <div style="height: 45%; position: relative;">
                        <a-table :loading="loading"
                                 :scroll="tableCommon.scroll"
                                 :columns="tableCommon.columns"
                                 :dataSource="tableInfo.incomeDetailIndep"
                                 :pagination="false"></a-table>
                      </div>
                    </div>
                  </div>
                  <!-- 独立收入 end -->

                  <!-- 医院收入 start -->
                  <div style="width: 33.333%;">
                    <div class="chart-container">
                      <!-- 图表 -->
                      <div style="height: 55%; position: relative; border-bottom: 1px solid #e7e7e7;">
                        <div id="income-bar-detail-nurse-main" class="myChart"></div>
                      </div>

                      <!-- 表格 -->
                      <div style="height: 45%; position: relative;">
                        <a-table :loading="loading"
                                 :scroll="tableCommon.scroll"
                                 :columns="tableCommon.columns"
                                 :dataSource="tableInfo.incomeDetailNurse"
                                 :pagination="false"></a-table>
                      </div>
                    </div>
                  </div>
                  <!-- 医院收入 end -->

                  <!-- 护理收入 start -->
                  <div style="width: 33.333%;">
                    <div class="chart-container">
                      <!-- 图表 -->
                      <div style="height: 55%; position: relative; border-bottom: 1px solid #e7e7e7;">
                        <div id="income-bar-detail-hospital-main" class="myChart"></div>
                      </div>

                      <!-- 表格 -->
                      <div style="height: 45%; position: relative;">
                        <a-table :loading="loading"
                                 :scroll="tableCommon.scroll"
                                 :columns="tableCommon.columns"
                                 :dataSource="tableInfo.incomeDetailHospital"
                                 :pagination="false"></a-table>
                      </div>
                    </div>
                  </div>
                  <!-- 护理收入 end -->
                </div>
              </a-collapse-panel>
            </a-collapse>
            <!-- 收入分析 end -->
          </div>
        </a-collapse-panel>
        <!-- income end -->

        <!-- EBITDA start -->
        <a-collapse-panel key="EBITDA" header="EBITDA">
          <div class="panel-box">
            <!-- 概况 start -->
            <a-collapse v-model="activeKey" @change="changePanels">
              <a-collapse-panel key="ebitda-overview" header="EBITDA 概况">
                <div class="overview-box">
                  <div style="width: 65%;">
                    <div class="chart-container">
                      <!-- 图表 -->
                      <div style="height: 55%; position: relative; border-bottom: 1px solid #e7e7e7;">
                        <div id="ebitda-bar-main" class="myChart"></div>
                      </div>

                      <!-- 表格 -->
                      <div style="height: 45%; position: relative;">
                        <a-table :loading="loading"
                                 :scroll="tableCommon.scroll"
                                 :columns="tableCommon.columns"
                                 :dataSource="tableInfo.ebitdaOverview"
                                 :pagination="false"></a-table>
                      </div>
                    </div>
                  </div>

                  <!-- 占比 -->
                  <div style="width: 35%;">
                    <div class="chart-container">
                      <!-- 业态占比 -->
                      <div style="height: 100%; position: relative;">
                        <div id="ebitda-pie-trade" class="myChart"></div>
                      </div>
                    </div>
                  </div>
                </div>
              </a-collapse-panel>
            </a-collapse>
            <!-- 概况 end -->

            <!-- EBITDA 详细 start -->
            <a-collapse v-model="activeKey" class="detail-box" @change="changePanels">
              <a-collapse-panel key="ebitda-detail" header="EBITDA 详细">

                <div class="overview-box">
                  <div style="width: 33.333%;">
                    <div class="chart-container">
                      <!-- 图表 -->
                      <div style="height: 55%; position: relative; border-bottom: 1px solid #e7e7e7;">
                        <div id="ebitda-bar-detail-indep-main" class="myChart"></div>
                      </div>

                      <!-- 表格 -->
                      <div style="height: 45%; position: relative;">
                        <a-table :loading="loading"
                                 :scroll="tableCommon.scroll"
                                 :columns="tableCommon.columns"
                                 :dataSource="tableInfo.ebitdaDetailIndep"
                                 :pagination="false"></a-table>
                      </div>
                    </div>
                  </div>

                  <div style="width: 33.333%;">
                    <div class="chart-container">
                      <!-- 图表 -->
                      <div style="height: 55%; position: relative; border-bottom: 1px solid #e7e7e7;">
                        <div id="ebitda-bar-detail-nurse-main" class="myChart"></div>
                      </div>

                      <!-- 表格 -->
                      <div style="height: 45%; position: relative;">
                        <a-table :loading="loading"
                                 :scroll="tableCommon.scroll"
                                 :columns="tableCommon.columns"
                                 :dataSource="tableInfo.ebitdaDetailNurse"
                                 :pagination="false"></a-table>
                      </div>
                    </div>
                  </div>

                  <div style="width: 33.333%;">
                    <div class="chart-container">
                      <!-- 图表 -->
                      <div style="height: 55%; position: relative; border-bottom: 1px solid #e7e7e7;">
                        <div id="ebitda-bar-detail-hospital-main" class="myChart"></div>
                      </div>

                      <!-- 表格 -->
                      <div style="height: 45%; position: relative;">
                        <a-table :loading="loading"
                                 :scroll="tableCommon.scroll"
                                 :columns="tableCommon.columns"
                                 :dataSource="tableInfo.ebitdaDetailHospital"
                                 :pagination="false"></a-table>
                      </div>
                    </div>
                  </div>
                </div>
              </a-collapse-panel>
            </a-collapse>
            <!-- EBITDA 详细 end -->
          </div>
        </a-collapse-panel>
        <!-- EBITDA end -->

        <!-- 销售 start -->
        <a-collapse-panel key="sale" header="销售">
          <div class="panel-box">
            <!-- 概况 start -->
            <a-collapse v-model="activeKey" @change="changePanels">
              <a-collapse-panel key="sale-overview" header="概况">
                <div class="overview-box">
                  <div style="width: 65%;">
                    <div class="chart-container">
                      <!-- 图表 -->
                      <div style="height: 70%; position: relative; border-bottom: 1px solid #e7e7e7;">
                        <div id="sale-bar-main" class="myChart"></div>
                      </div>

                      <!-- 表格 -->
                      <div style="height: 30%; position: relative;">
                        <a-table :loading="loading"
                                 :scroll="tableCommon.scroll"
                                 :columns="tableCommon.columns"
                                 :dataSource="tableInfo.saleOverview"
                                 :pagination="false"></a-table>
                      </div>
                    </div>
                  </div>

                  <!-- 占比 -->
                  <div style="width: 35%;">
                    <div class="chart-container">
                      <!-- 业态收入占比 -->
                      <div style="height: 100%; position: relative;">
                        <div id="sale-pie-trade" class="myChart"></div>
                      </div>
                    </div>
                  </div>
                </div>
              </a-collapse-panel>
            </a-collapse>
            <!-- 概况 end -->

            <!-- 收入详细 start -->
            <a-collapse v-model="activeKey" class="detail-box" @change="changePanels">
              <a-collapse-panel key="sale-detail" header="销售详细">

                <div class="overview-box">
                  <div style="width: 33.333%;">
                    <div class="chart-container">
                      <!-- 图表 -->
                      <div style="height: 70%; position: relative; border-bottom: 1px solid #e7e7e7;">
                        <div id="sale-bar-detail-indep-main" class="myChart"></div>
                      </div>

                      <!-- 表格 -->
                      <div style="height: 30%; position: relative;">
                        <a-table :loading="loading"
                                 :scroll="tableCommon.scroll"
                                 :columns="tableCommon.columns"
                                 :dataSource="tableInfo.saleDetailIndep"
                                 :pagination="false"></a-table>
                      </div>
                    </div>
                  </div>

                  <div style="width: 33.333%;">
                    <div class="chart-container">
                      <!-- 图表 -->
                      <div style="height: 70%; position: relative; border-bottom: 1px solid #e7e7e7;">
                        <div id="sale-bar-detail-nurse-main" class="myChart"></div>
                      </div>

                      <!-- 表格 -->
                      <div style="height: 30%; position: relative;">
                        <a-table :loading="loading"
                                 :scroll="tableCommon.scroll"
                                 :columns="tableCommon.columns"
                                 :dataSource="tableInfo.saleDetailNurse"
                                 :pagination="false"></a-table>
                      </div>
                    </div>
                  </div>

                  <div style="width: 33.333%;">
                    <div class="chart-container">
                      <!-- 图表 -->
                      <div style="height: 70%; position: relative; border-bottom: 1px solid #e7e7e7;">
                        <div id="sale-bar-detail-hospital-main" class="myChart"></div>
                      </div>

                      <!-- 表格 -->
                      <div style="height: 30%; position: relative;">
                        <a-table :loading="loading"
                                 :scroll="tableCommon.scroll"
                                 :columns="tableCommon.columns"
                                 :dataSource="tableInfo.saleDetailHospital"
                                 :pagination="false"></a-table>
                      </div>
                    </div>
                  </div>
                </div>
              </a-collapse-panel>
            </a-collapse>
            <!-- 收入分析 end -->
          </div>
        </a-collapse-panel>
        <!-- 销售 end -->
      </a-collapse>
    </div>
    <!-- 布局2：选择「单个园区 + 增长与价值维度」时展示 end -->

    <!-- 布局3：选择「融合与业态」时展示 start -->
    <div class="chart-box" v-else-if="dimension.value.value === 'fuseAndBiz'">
      <a-collapse v-model="activeKey" @change="changePanels">
        <!-- 融合与业态整体 start -->
        <a-collapse-panel key="whole-overview" header="融合与业态-整体">
          <div class="overview-box">

            <!-- 1. 整体收入 start -->
            <div style="width: 33.333%;">
              <div class="chart-container">
                <!-- 图表 -->
                <div style="height: 55%; position: relative; border-bottom: 1px solid #e7e7e7;">
                  <div id="whole-income" class="myChart"></div>
                </div>

                <!-- 表格 -->
                <div style="height: 45%; position: relative;">
                  <a-table :loading="loading"
                           :scroll="tableCommon.scroll"
                           :columns="tableCommon.columns"
                           :dataSource="tableInfo.incomeOverview"
                           :pagination="false"></a-table>
                </div>
              </div>
            </div>
            <!-- 1. 整体收入 end -->

            <!-- 2. 整体 EBITDA start -->
            <div style="width: 33.333%;">
              <div class="chart-container">
                <!-- 图表 -->
                <div style="height: 55%; position: relative; border-bottom: 1px solid #e7e7e7;">
                  <div id="whole-EBITDA" class="myChart"></div>
                </div>

                <!-- 表格 -->
                <div style="height: 45%; position: relative;">
                  <a-table :loading="loading"
                           :scroll="tableCommon.scroll"
                           :columns="tableCommon.columns"
                           :dataSource="tableInfo.ebitdaOverview"
                           :pagination="false"></a-table>
                </div>
              </div>
            </div>
            <!-- 2. 整体 EBITDA end -->

            <!-- 3. 整体销售 start -->
            <div style="width: 33.333%;">
              <div class="chart-container">
                <!-- 图表 -->
                <div style="height: 69.5%; position: relative; border-bottom: 1px solid #e7e7e7;">
                  <div id="whole-sale" class="myChart"></div>
                </div>

                <!-- 表格 -->
                <div style="height: 30.5%; position: relative;">
                  <a-table :loading="loading"
                           :scroll="tableCommon.scroll"
                           :columns="tableCommon.columns"
                           :dataSource="tableInfo.saleOverview"
                           :pagination="false"></a-table>
                </div>
              </div>
            </div>
            <!-- 3. 整体销售 end -->

          </div>
        </a-collapse-panel>
        <!-- 融合与业态整体 end -->

        <!-- 融合与业态详情 start -->
        <a-collapse-panel key="whole-detail" header="融合与业态-详情">
          <div class="overview-box" style="max-height: 800px; overflow: auto;">

            <!-- 4. 独立收入 start -->
            <div style="width: 33.333%;">
              <div class="chart-container">
                <!-- 图表 -->
                <div style="height: 55%; position: relative; border-bottom: 1px solid #e7e7e7;">
                  <div id="indep-income" class="myChart"></div>
                </div>

                <!-- 表格 -->
                <div style="height: 45%; position: relative;">
                  <a-table :loading="loading"
                           :scroll="tableCommon.scroll"
                           :columns="tableCommon.columns"
                           :dataSource="tableInfo.incomeDetailIndep"
                           :pagination="false"></a-table>
                </div>
              </div>
            </div>
            <!-- 4. 独立收入 end -->

            <!-- 5. 独立 EBITDA start -->
            <div style="width: 33.333%;">
              <div class="chart-container">
                <!-- 图表 -->
                <div style="height: 55%; position: relative; border-bottom: 1px solid #e7e7e7;">
                  <div id="indep-EBITDA" class="myChart"></div>
                </div>

                <!-- 表格 -->
                <div style="height: 45%; position: relative;">
                  <a-table :loading="loading"
                           :scroll="tableCommon.scroll"
                           :columns="tableCommon.columns"
                           :dataSource="tableInfo.ebitdaDetailIndep"
                           :pagination="false"></a-table>
                </div>
              </div>
            </div>
            <!-- 5. 独立 EBITDA end -->

            <!-- 6. 独立销售 start -->
            <div style="width: 33.333%;">
              <div class="chart-container">
                <!-- 图表 -->
                <div style="height: 69.5%; position: relative; border-bottom: 1px solid #e7e7e7;">
                  <div id="indep-sale" class="myChart"></div>
                </div>

                <!-- 表格 -->
                <div style="height: 30.5%; position: relative;">
                  <a-table :loading="loading"
                           :scroll="tableCommon.scroll"
                           :columns="tableCommon.columns"
                           :dataSource="tableInfo.saleDetailIndep"
                           :pagination="false"></a-table>
                </div>
              </div>
            </div>
            <!-- 6. 独立销售 end -->

            <!-- 7. 护理收入 start -->
            <div style="width: 33.333%;">
              <div class="chart-container">
                <!-- 图表 -->
                <div style="height: 55%; position: relative; border-bottom: 1px solid #e7e7e7;">
                  <div id="nurse-income" class="myChart"></div>
                </div>

                <!-- 表格 -->
                <div style="height: 45%; position: relative;">
                  <a-table :loading="loading"
                           :scroll="tableCommon.scroll"
                           :columns="tableCommon.columns"
                           :dataSource="tableInfo.incomeDetailNurse"
                           :pagination="false"></a-table>
                </div>
              </div>
            </div>
            <!-- 7. 护理收入 end -->

            <!-- 8. 护理 EBITDA start -->
            <div style="width: 33.333%;">
              <div class="chart-container">
                <!-- 图表 -->
                <div style="height: 55%; position: relative; border-bottom: 1px solid #e7e7e7;">
                  <div id="nurse-EBITDA" class="myChart"></div>
                </div>

                <!-- 表格 -->
                <div style="height: 45%; position: relative;">
                  <a-table :loading="loading"
                           :scroll="tableCommon.scroll"
                           :columns="tableCommon.columns"
                           :dataSource="tableInfo.ebitdaDetailNurse"
                           :pagination="false"></a-table>
                </div>
              </div>
            </div>
            <!-- 8. 护理 EBITDA end -->

            <!-- 9. 护理销售 start -->
            <div style="width: 33.333%;">
              <div class="chart-container">
                <!-- 图表 -->
                <div style="height: 69.5%; position: relative; border-bottom: 1px solid #e7e7e7;">
                  <div id="nurse-sale" class="myChart"></div>
                </div>

                <!-- 表格 -->
                <div style="height: 30.5%; position: relative;">
                  <a-table :loading="loading"
                           :scroll="tableCommon.scroll"
                           :columns="tableCommon.columns"
                           :dataSource="tableInfo.saleDetailNurse"
                           :pagination="false"></a-table>
                </div>
              </div>
            </div>
            <!-- 9. 护理销售 end -->

            <!-- 10. 医院收入 start -->
            <div style="width: 33.333%;">
              <div class="chart-container">
                <!-- 图表 -->
                <div style="height: 55%; position: relative; border-bottom: 1px solid #e7e7e7;">
                  <div id="hospital-income" class="myChart"></div>
                </div>

                <!-- 表格 -->
                <div style="height: 45%; position: relative;">
                  <a-table :loading="loading"
                           :scroll="tableCommon.scroll"
                           :columns="tableCommon.columns"
                           :dataSource="tableInfo.incomeDetailHospital"
                           :pagination="false"></a-table>
                </div>
              </div>
            </div>
            <!-- 10. 医院收入 end -->

            <!-- 11. 医院 EBITDA start -->
            <div style="width: 33.333%;">
              <div class="chart-container">
                <!-- 图表 -->
                <div style="height: 55%; position: relative; border-bottom: 1px solid #e7e7e7;">
                  <div id="hospital-EBITDA" class="myChart"></div>
                </div>

                <!-- 表格 -->
                <div style="height: 45%; position: relative;">
                  <a-table :loading="loading"
                           :scroll="tableCommon.scroll"
                           :columns="tableCommon.columns"
                           :dataSource="tableInfo.ebitdaDetailHospital"
                           :pagination="false"></a-table>
                </div>
              </div>
            </div>
            <!-- 11. 医院 EBITDA end -->

            <!-- 12. 医院床位使用情况 start -->
            <div style="width: 33.333%;">
              <div class="chart-container">
                <!-- 图表 -->
                <div style="height: 69.5%; position: relative; border-bottom: 1px solid #e7e7e7;">
                  <div id="hospital-bed" class="myChart"></div>
                </div>

                <!-- 表格 -->
                <div style="height: 30.5%; position: relative;">
                  <a-table :loading="loading"
                           :scroll="tableCommon.scroll"
                           :columns="tableCommon.columns"
                           :dataSource="tableInfo.saleDetailHospital"
                           :pagination="false"></a-table>
                </div>
              </div>
            </div>
            <!-- 12. 医院床位使用情况 end -->

          </div>
        </a-collapse-panel>
        <!-- 融合与业态详情 end -->
      </a-collapse>
    </div>
    <!-- 布局3：选择「融合与业态」时展示 end -->

    <!-- 看板图表展示 end -->
  </div>
</template>



<!-- 看板控制器 -->
<script src="./screenKpi/screenKpi.controller.js"></script>



<!-- 看板样式 -->
<style lang="less" scoped>

  .menu-box {
    margin-bottom: 10px;

    [class*="query-"] {
      float: left;
      margin-right: 10px;
    }

    /deep/.ant-select {
      width: 120px;
    }

    .query-depart {
      /deep/.ant-select {
        width: 150px;
      }
    }
  }

  .chart-box {
    /deep/.ant-collapse { margin-bottom: 20px; }

    .overview-box {
      display: flex;
      flex-wrap: wrap;

      & > div { padding: 5px; }
      & > div:nth-child(1) { padding-left: 0; }
      & > div:nth-last-child(1) { padding-right: 0; }

      .myChart {
        width: 100%;
        height: 100%;
        position: relative;
      }

      .chart-container {
        height: 500px;
        border: 1px solid #e7e7e7;
        background-color: #fafafa;
        position: relative;
      }
    }

    .panel-box {
      max-height: 800px;
      overflow: auto;
    }

    /deep/.ant-table-thead > tr > th,
    /deep/.ant-table-tbody > tr > td {
      height: 36px;
      padding: 2px !important;
    }
  }

</style>
